<script type="text/javascript" src="/js/jquery.jcrop.js"></script>
	<h1><?php echo $this->title ?></h1>
	<?php echo !empty($errors) ? '<p>' . implode('<br />', $errors) . '</p>' : NULL ?>
	<form method="post" action="" enctype="multipart/form-data">
		<table class="t-data t-data-edit">
			<thead>
				<tr class="tr-titles">
					<td class="td-row-title">Параметры</td>
					<td>Значения</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Группа</td>
					<td>
						<?php echo $data['group'] ?>
					</td>
				</tr>
				<tr>
					<td>Иконка:</td>
					<td>
<script language="Javascript">
$(function()
{
	var preview = $('#preview');
	var previewBox = $('#previewBox');
	var source = $('#source');

	var inputs = {
		x: $('#coords_x'),
		y: $('#coords_y'),
		w: $('#coords_w'),
		h: $('#coords_h')
	};

	previewBox.show();

<?php switch($mode):?>
<?php case 'icon': ?>
	var size = {width: 150, height: 113};

	previewBox.css({
		width: size.width + 'px',
		height: size.height + 'px'
	});
	
	function showPreview(coords)
	{
		inputs.x.val(coords.x);
		inputs.y.val(coords.y);
		inputs.w.val(coords.w);
		inputs.h.val(coords.h);

		if (parseInt(coords.w) > 0)
		{
			var rx = size.width / coords.w;
			var ry = size.height / coords.h;

			preview.css({
				width: Math.round(rx * source.width()) + 'px',
				height: Math.round(ry * source.height()) + 'px',
				marginLeft: '-' + Math.round(rx * coords.x) + 'px',
				marginTop: '-' + Math.round(ry * coords.y) + 'px'
			});
		}
	}
	
	source.Jcrop({
		onChange: showPreview,
		onSelect: showPreview,
		minSize: [size.width, size.height],
		aspectRatio: size.width/size.height
	});
<?php break ?>
<?php case 'image': ?>
	var size = {width: 800, height: 600};

	function showPreview(coords)
	{
		inputs.x.val(coords.x);
		inputs.y.val(coords.y);
		inputs.w.val(coords.w);
		inputs.h.val(coords.h);

		if (parseInt(coords.w) > 0)
		{
			var width = Math.min(coords.w, size.width);
			var height = Math.min(coords.h, size.height);
			var rx = width / coords.w;
			var ry = height / coords.h;

			preview.css({
				width: Math.round(rx * source.width()) + 'px',
				height: Math.round(ry * source.height()) + 'px',
				marginLeft: '-' + Math.round(rx * coords.x) + 'px',
				marginTop: '-' + Math.round(ry * coords.y) + 'px'
			});
			
			previewBox.css({
				width: width + 'px',
				height: height + 'px'
			});
		}
	}
	
	source.Jcrop({
		onChange: showPreview,
		onSelect: showPreview
	});
<?php break ?>
<?php endswitch ?>
});
</script>
						<div id="previewBox" style="float:right;overflow:hidden;display:none">
							<img id="preview" src="<?php echo $data['source'] ?>" alt="" />
						</div>
						<img id="source" src="<?php echo $data['source'] ?>" alt="" />
						<input id="coords_x" type="hidden" name="x" value="" />
						<input id="coords_y" type="hidden" name="y" value="" />
						<input id="coords_w" type="hidden" name="w" value="" />
						<input id="coords_h" type="hidden" name="h" value="" />
					</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td class="td-row-title">
						<a href="<?php echo $this->name ?>/">&lt;&lt;&lt; Назад</a>
					</td>
					<td>
						<input type="submit" class="i-submit" value="Вырезать" />
					</td>
				</tr>
			</tfoot>
		</table>
	</form>